<script setup lang="ts">
defineOptions({ name: "UserRolePage" });

import Search from "_c/search/index.vue";
import type { roleInfoType } from "_s/config/role/type";
// date, QAvatar, QToggle, QBtn, QTooltip, QChip
import useTablePagination from "_s/hooks/usePagination";
const { pagination } = useTablePagination();
import { getRoleList } from "_s/config/role";
import type { QTableProps } from "quasar";
import { date, QBtn, QTooltip, QChip } from "quasar";
const { notify, loading, dialog, dark } = useQuasar();
const { t } = useI18n();
import User from "./user.vue";
import Add from "./add.vue";
import Auth from "./auth.vue";

//#region  列表 搜索
const search = ref("");
const handleSearch = () => {
  pagination.value.page = 1;
  void getdata();
};

const getpage = (props: any) => {
  pagination.value = props.pagination;
  void getdata();
};
//#endregion

//#region table 数据
const tableData = ref<roleInfoType[]>([]);
const getdata = async () => {
  loading.show();
  const { code, data, msg } = await getRoleList({
    page: pagination.value.page,
    pageSize: pagination.value.rowsPerPage,
    keyword: search.value
  });
  console.log(data);

  loading.hide();
  if (code == 0) {
    tableData.value = data.data;
    pagination.value.rowsNumber = data.total;
  } else {
    notify({
      message: msg,
      type: "error"
    });
  }
};
void getdata();
//#endregion

//#region table column
const tableColumns = computed<QTableProps["columns"]>(() => [
  {
    name: "name",
    label: t("page.role.name"),
    align: "left",
    field: "name"
  },
  {
    name: "users",
    label: t("page.role.users_number"),
    align: "left",
    field: row => {
      if (!row.userIds) return;
      const { users } = row;
      return h(QChip, { label: users.length, square: true, outline: true, color: "primary" });
    }
  },
  {
    name: "create_time",
    label: t("pub.create_time"),
    align: "left",
    field: row => date.formatDate(row.create_time, "YYYY-MM-DD HH:mm:ss")
  },
  {
    name: "",
    label: t("pub.operation"),
    align: "left",
    field: row => {
      return [
        h(
          QBtn,
          {
            flat: true,
            color: "primary",
            round: true,
            size: "sm",
            icon: "fa-solid fa-pencil",
            onClick: () => edit(row)
          },
          {
            default: () =>
              h(QTooltip, null, {
                default: () => t("pub.edit")
              })
          }
        ),
        h(
          QBtn,
          {
            flat: true,
            color: "negative",
            round: true,
            size: "sm",
            icon: "fa-regular fa-trash-can",
            onClick: () => del(row)
          },
          {
            default: () =>
              h(QTooltip, null, {
                default: () => t("pub.delete")
              })
          }
        ),
        h(
          QBtn,
          {
            flat: true,
            color: "positive",
            round: true,
            size: "sm",
            icon: "fa-regular fa-user",
            onClick: () => setUser(row)
          },
          {
            default: () =>
              h(QTooltip, null, {
                default: () => t("page.role.bind_user")
              })
          }
        ),
        h(
          QBtn,
          {
            flat: true,
            color: "accent",
            round: true,
            size: "sm",
            icon: "fa-solid fa-align-left",
            onClick: () => setAuth(row)
          },
          {
            default: () =>
              h(QTooltip, null, {
                default: () => t("page.role.bind_menu")
              })
          }
        )
      ];
    }
  }
]);

//#endregion

//#region 编辑用户信息和状态
const diaload = ref(false);
const commponent = shallowRef();
const dialoadProps = ref<roleInfoType>();
const add = () => {
  diaload.value = true;
  commponent.value = Add;
  dialoadProps.value = {} as roleInfoType;
};
const setAuth = (row: roleInfoType) => {
  diaload.value = true;
  commponent.value = Auth;
  dialoadProps.value = row;
};
const edit = (row: roleInfoType) => {
  diaload.value = true;
  commponent.value = Add;
  dialoadProps.value = row;
};
const del = (row: roleInfoType) => {
  dialog({
    title: "提示!",
    message: `确定要删除 ${row.name} 这个角色吗？`,
    ok: {
      unelevated: true,
      color: "primary"
    },
    cancel: {
      outline: true,
      color: dark.isActive ? "white" : ""
    }
  }).onOk(() => {
    // const { code, msg } = await postDelRole({ id: item.id as number });
    // if (code === 0) {
    //   notify({
    //     message: "删除成功",
    //     type: "success"
    //   });
    //   handleSearch();
    // } else {
    //   notify({
    //     message: msg,
    //     type: "error"
    //   });
    // }
  });
};
const setUser = (row: roleInfoType) => {
  diaload.value = true;
  commponent.value = User;
  dialoadProps.value = row;
};
//#endregion
</script>
<template>
  <q-page>
    <div class="row justify-between">
      <Search
        v-model="search"
        @handleSearch="handleSearch"
      ></Search>
      <!-- <q-btn unelevated color="primary" icon="add" :label="$t('pub.add')" @click.prevent="add" /> -->
    </div>
    <q-table
      class="q-mt-md"
      v-model:pagination="pagination"
      flat
      bordered
      @request="getpage"
      :rows="tableData"
      :columns="tableColumns"
      row-key="id"
    >
      <template v-slot:top>
        <div
          class="q-pt-xs"
          v-title
        >
          <div class="text-weight-medium q-mt-xs title">
            {{ $t("page.role.list") }}
          </div>
        </div>
        <q-space />
        <div>
          <q-btn
            round
            unelevated
            color="primary"
            icon="add"
            size="sm"
            @click="add"
          >
            <q-tooltip>
              {{ $t("pub.add") }}
            </q-tooltip>
          </q-btn>
        </div>
      </template>
    </q-table>

    <q-dialog v-model="diaload">
      <component
        :is="commponent"
        v-model="diaload"
        :info="dialoadProps"
        @update="handleSearch"
      ></component>
    </q-dialog>
  </q-page>
</template>

<style scoped lang="scss"></style>
